<template>
	<view class="publish-container">
		<view class="content">
			<uni-forms ref="form" :modelValue="formData" label-width="100px">
				<uni-forms-item required label="标题:" name="title">
					<uni-easyinput type="text" v-model="formData.title" placeholder="请输入客栈名称" />
				</uni-forms-item>
				<view @click="openAddress">
					<uni-forms-item required label="省/市/区:" name="province">
						<uni-easyinput type="text" v-model="formData.province" placeholder="请选择客栈所在省份/地区" />
					</uni-forms-item>
				</view>
				<!-- <view @click="getAddress"> -->
					<uni-forms-item required label="详细地址:" name="address">
						<uni-easyinput type="text" :disabled="true" v-model="formData.address" placeholder="请填写客栈详细地址" />
					</uni-forms-item> 
				<!-- </view> -->

				<uni-forms-item required label="客栈介绍:" name="introduce">
					<textarea maxlength="-1" :show-confirm-bar="false" v-model="formData.introduce"
						placeholder="请填写客栈介绍"></textarea>
				</uni-forms-item>
				<uni-forms-item required label="招募时间:" name="time">
					<uni-datetime-picker type="daterange" return-type="timestamp" v-model="formData.time" />
				</uni-forms-item>
				<uni-forms-item required label="招募人数:" name="number">
					<u-slider show-value v-model="formData.number" min="0" max="50"></u-slider>
				</uni-forms-item>
				<uni-forms-item required label="招募人姓名:" name="name">
					<uni-easyinput type="text" v-model="formData.name" placeholder="请填写招募人姓名" />
				</uni-forms-item>
				<uni-forms-item required label="联系电话:" name="phone">
					<uni-easyinput type="number" v-model="formData.phone" placeholder="请填写联系电话" />
				</uni-forms-item>
				<uni-forms-item required label="工作内容:" name="content">
					<textarea placeholder="请输入工作内容" maxlength="-1" :show-confirm-bar="false"
						v-model="formData.content"></textarea>
				</uni-forms-item>
				<uni-forms-item required label="工作要求:" name="demand">
					<textarea :adjust-position="true" placeholder="请填写工作要求" maxlength="-1" :show-confirm-bar="false"
						v-model="formData.demand"></textarea>
				</uni-forms-item>
			</uni-forms>
			<view class="image-title">
				请上传客栈照片：
			</view>
			<view class="publish-image-box">
				<view class="publish-image-item" v-for="(item,index) in imgArr" :key="index">
					<view class="close-btn">
						<uni-icons type="closeempty" size="18" color="#fff" @click="delImage(index)"></uni-icons>
					</view>
					<view class="image-box">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</view>
				<!-- 添加图片的icon,最多上传9个图片超出9个就不展示 -->
				<view v-if="imgArr.length < 9" class="publish-image-item" @click="addImage">
					<view class="image-box">
						<uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
					</view>
				</view>
			</view>
			<button class="btn" @click="publish">发布招募</button>
		</view>
		<!-- 垫片 -->
		<view style="margin:0;height: 10rpx;">
			<liu-customize-sel ref="scroll" @change='chooseSuccess'></liu-customize-sel>
		</view>
	</view>
</template>

<script>
	import {
		publish,getDetail
	} from "../../ajax/api/qiye.js";
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				formData: {
					title: "",
					// scan: "",
					// avatar: "",
					address: "",
					province: "",
					introduce: "",
					time: null,
					name: "",
					number: 20,
					phone: "",
					content: "",
					demand: ""
				},
				imgArr: [], //客栈照片
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '请填写客栈名称',
						}],
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请填写客栈详细地址',
						}]
					},
					province: {
						rules: [{
							required: true,
							errorMessage: '请选择客栈省/市/区',
						}]
					},
					introduce: {
						rules: [{
							required: true,
							errorMessage: '请填写客栈介绍',
						}]
					},
					time: {
						rules: [{
							required: true,
							errorMessage: '请选择招募时间',
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '请填写招募人姓名',
						}, {
							minLength: 2,
							maxLength: 8,
							errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请填写招募人联系电话',
						}, {
							validateFunction: (rule, value, data, callback) => {
								const reg = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
								if (!reg.test(value)) {
									callback("请输入正确的手机号")
								} else {
									callback();
								}
							}
						}]
					},
					content: {
						rules: [{
							required: true,
							errorMessage: '请填写工作内容',
						}]
					},
					demand: {
						rules: [{
							required: true,
							errorMessage: '请填写工作要求',
						}]
					}
				}
			}
		},
		async onShow() {
			
			// #ifdef MP-WEIXIN
			if (wx.hideHomeButton) {
				wx.hideHomeButton();
			}
			// #endif
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		computed: {
			...mapState(["userInfo","token","qiyeData"])
		},
		methods: {
			// 添加图片
			async addImage() {
				const count = 9 - this.imgArr.length;
				uni.chooseImage({
					count,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						tempFilePaths.forEach((url, index) => {
							if (index < count) {
								uni.uploadFile({
									url: 'http://192.168.43.218:9527/api/upload', 
									filePath: url,
									header: {
										'Authorization': "Bearer " + this.token
									},
									name: 'file',
									success: async (uploadFileRes) => {
										const url = "http://192.168.43.218:9527" + (JSON.parse(uploadFileRes.data)).data
										this.imgArr.push(url);
									}
								});
							}
						})
					}
				})
			},
			// 删除图片
			delImage(index) {
				this.imgArr.splice(index, 1);
			},
			//打开地址选择器
			openAddress() {
				this.$refs.scroll.open()
			},
			//地址选择成功
			chooseSuccess(e) {
				this.formData.province = e.value[0].label + " · " + e.value[1].label + " · " + e.value[2].label;
			},
			// 获取详细地址
			getAddress() {
				// 点击调起地图选择位置
				const that = this;
				// 进行位置授权
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						// 选择位置
						uni.chooseLocation({
							success: (res) => {
								that.formData.address = res.address;
							},
							fail(error) {
								console.log('选择位置失败', error)
							},
						})
					}
				})
			},
			// 发布活动
			publish() {
				this.$refs.form.validate().then(async res => {
					if (this.imgArr.length) {
						await publish({
							enterprise:this.qiyeData._id,
							avatar: this.userInfo.avatar ? this.userInfo.avatar : "/static/logo.png",
							imgArr: this.imgArr,
							...this.formData
						})
						uni.showModal({
							title:"发布成功，等待审核",
							showCancel:false
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:"/pages/welcome/welcome"
							})
						},500)
					} else {
						uni.showToast({
							title: "请上传客栈图片",
							icon: "error"
						})
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./css/publish.scss";
</style>
